<template>
  <div class="user-info">
    <van-row class="user">
      <van-col :span="6">
        <img v-if="info.img" :src="info.img"/>
        <img v-vanse :src="`${$baseImgUrl}qa/noface.gif`"/>
      </van-col>
      <van-col :span="16" :offset="1">
        <h3 class="username">{{info.name}}</h3>
        <p>金币：<span class="money">{{info.money}}</span></p>
        <p>经验值：{{info.experience}}</p>
      </van-col>
    </van-row>
    <div class="answer">
      <van-row>
        <van-col :span="8">回答数</van-col>
        <van-col :span="8">采纳率</van-col>
        <van-col :span="8">提问数</van-col>
      </van-row>
      <van-row class="num">
        <van-col :span="8"><span>{{info.answerCount}}</span></van-col>
        <van-col :span="8"><span>{{info.acceptRate}}</span></van-col>
        <van-col :span="8"><span>{{info.questionCount}}</span></van-col>
      </van-row>
    </div>
    <div class="btn-wrap">
      <van-row>
        <van-col :span="12" class="my-question">
          <i class="huobo huobo-question"></i>
          我的提问
        </van-col>
        <van-col :span="12" class="my-answer">
          <i class="huobo huobo-answer"></i>
          我的回答
        </van-col>
      </van-row>
    </div>
  </div>
</template>

<script>
export default {
  name: 'UserInfo',
  props: {
    info: {
      type: Object,
      default() {
        return {
          img: '',
          name: '韩梅梅',
          money: 123,
          experience: 43,
          answerCount: 32,
          acceptRate: '12.34%',
          questionCount: 2
        };
      }
    }
  }
};
</script>

<style lang="less" scoped>
  @import '../../../less/global.less';
  @borderColor: #e6d854;
  .user-info {
    margin-bottom: 10px;
    padding: 10px;
    border: 1px solid @borderColor;
    background-color: #edf5d3a1;
    color: #666;
    .user {
      img {
        width: 70px;
        height: 70px;
        border: 2px solid @borderColor;
        border-radius: 5px;
      }
      .username {
        line-height: 30px;
        color: #333;
      }
      p {
        line-height: 20px;
      }
    }
    .answer {
      margin: 10px 0;
      padding: .5rem 0;
      border-top: 1px dashed @borderColor;
      border-bottom: 1px dashed @borderColor;
      .van-row {
        line-height: 24px;
        &.num {
          span:hover {
            color: @mainBgColor;
            cursor: pointer;
          }
        }
        .van-col {
          text-align: center;
          border-right: 1px dashed @borderColor;
          &:last-child {
            border: 0;
          }
        }
      }
    }
    .btn-wrap {
      .van-col {
        padding: 8px 0;
        text-align: center;
        border: 1px solid @borderColor;
        cursor: pointer;
        &:active {
          color: #fff;
          background-color: @mainBgHoverColor;
          &:before {
            color: #fff;
          }
        }
        &:first-child {
          border-right: 0;
          border-top-left-radius: 3px;
          border-bottom-left-radius: 3px;
        }
        &:last-child {
          border-top-right-radius: 3px;
          border-bottom-right-radius: 3px;
        }
        &:before {
          font-size: 18px;
          color: green;
        }
      }
    }
  }
</style>
